<style>

#attributes-supplyinformation thead tr td,
#attributes-networkstatus thead tr td,
#attributes-downstreamoperationplans thead tr td,
#attributes-upstreamoperationplans thead tr td,
#attributes-operationproblems thead tr td,
#attributes-operationresources thead tr td,
#attributes-operationflowplans thead tr td,
#attributes-operationdemandpegging thead tr td {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #bbb;
}
</style>

<div data-ng-controller="operationplandetailCtrl" id="controller">
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default" id="attributes-operationplan" data="operationplan" showoperationplan-drv style="margin-bottom: 18px;"></div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-default" id="attributes-operationproblems" data-ng-if="operationplan.id !== -1 && operationplan.problems != undefined" data="operationplan" showproblemspanel-drv></div>
      <div class="panel panel-default" id="attributes-operationresources" data-ng-if="operationplan.id !== -1 && operationplan.loadplans != undefined" data="operationplan" showresourcespanel-drv></div>
      <div class="panel panel-default" id="attributes-operationflowplans" data-ng-if="operationplan.id !== -1 && operationplan.flowplans != undefined" data="operationplan" showbufferspanel-drv></div>
      <div class="panel panel-default" id="attributes-operationdemandpegging" data-ng-if="operationplan.id !== -1 && operationplan.pegging_demand.length > 0" data="operationplan" showoperationpeggingpanel-drv></div>
    </div>
  </div>
  <!-- row end  -->
  <div class="row">
    <div class="col-xs-12">
      <div class="panel panel-default" id="attributes-networkstatus" data-ng-if="operationplan.network !== undefined" data="operationplan" shownetworkstatus-drv style="margin-bottom: 18px;"></div>
    </div>
  </div>
  <!-- row end  -->
  <div class="row">
    <div class="col-xs-12">
      <div class="panel panel-default" id="attributes-downstreamoperationplans" data-ng-if="operationplan.downstreamoperationplans !== undefined" data="operationplan" showdownstreamoperationplans-drv style="margin-bottom: 18px;"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="panel panel-default" id="attributes-upstreamoperationplans" data-ng-if="operationplan.upstreamoperationplans !== undefined" data="operationplan" showupstreamoperationplans-drv style="margin-bottom: 18px;"></div>
    </div>
  </div>    
  <!-- row end  -->
  <div class="row">
    <div class="col-xs-12">
      <div class="panel panel-default" id="attributes-supplyinformation" data-ng-if="operationplan.attributes !== undefined" data="operationplan" showsupplyinformation-drv style="margin-bottom: 18px;"></div>
    </div>
  </div>
  <!-- row end  -->
  <div id="popup2" class="modal fade in" role="dialog" style="z-index: 10000; overflow-y: visible">
    <div class="modal-dialog" data-ng-style="{'width': (databaseerrormodal) ? '500px' : '300px'}">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true" class="fa fa-times"></span>
          </button>
          <h4 class="modal-title" data-ng-if="!databaseerrormodal && !rowlimiterrormodal" style="text-transform: capitalize;" translate>unsaved changes</h4>
          <h4 class="modal-title" data-ng-if="rowlimiterrormodal && rowlimiterrormodal" style="text-transform: capitalize;" translate>gantt chart rows limit</h4>
          <h4 class="modal-title" data-ng-if="databaseerrormodal" style="text-transform: capitalize;" translate>database transaction failed</h4>
        </div>
        <div class="modal-body" ng-if="!databaseerrormodal && !rowlimiterrormodal">
          <p translate>Do you want to save your changes first?</p>
        </div>
        <div class="modal-body" ng-if="!databaseerrormodal && rowlimiterrormodal">
          <p translate>The Gantt chart is limited to {{rowlimit}} rows.</p>
          <p translate>Please be patient, the chart may take some time to complete.</p>
        </div>
        <div class="modal-body" ng-if="databaseerrormodal" style="height: 350px; overflow: auto;"></div>
        <div class="modal-footer">
          <input type="submit" id="saveAbutton" role="button" data-ng-if="!databaseerrormodal  && !rowlimiterrormodal" data-ng-click="modalcallback.resolve('save')" class="btn btn-primary" data-dismiss="modal" value="{{'Save'|translate }}">
          <input type="submit" id="cancelAbutton" role="button" data-ng-click="modalcallback.resolve('continue'); rowlimiterrormodal = false;" class="btn btn-primary" data-dismiss="modal" value="{{'Continue'|translate }}">
        </div>
      </div>
    </div>
  </div>

  <script>
    $(function() {
      setTimeout(function () {
        //very simple way to adjust grid width without introducing a new watch in angular controller
        $('#grid').setGridWidth($('#content-main').width());
      }, 50);
    });
  </script>

</div>
<!-- ng-controller end  -->
</div>
<!-- ng-app end  -->
